<template>
	<main>
		<b-container class="bv-example-row">
			<b-row>
				<b-col cols="6" class="dwqd">
					<mt-navbar v-model="selected">
					  <mt-tab-item id="1">涨幅榜</mt-tab-item>
					  <mt-tab-item id="2">跌幅榜</mt-tab-item>
					</mt-navbar>
				</b-col>
			</b-row>
		</b-container>
 
	</main>
</template>
<script>
import { MessageBox, Toast, Badge } from 'mint-ui'
import storage from '@/tools/storage.js'
import { quotaQuotaGetAllNewlyQuotaData } from '@api/quota.js'
import { orderVarietyGetTypeVariety } from '@api/order.js'

import Vue from 'vue'
Vue.component(Badge)
import axios from 'axios'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
	name: 'Hot',
	data() {
		return {
			imgUp: './static/imgs/up.svg',
			imgDown: './static/imgs/down.svg',
			imgMore: './static/imgs/more.svg',
			loading: false,
			typeVariety: [],
			selected : [],
			amount : [],
		}
	},
	mounted() {
        this.getTypeVariety()
        //获取涨跌幅数据
        this.getAmrount() 
	},
	beforeDestroy() {
		clearTimeout(this.timer)
	},
	computed: {
		...mapState(['allVariety', 'allTypeVariety'])
	},
	methods: {
		...mapMutations(['setGold']),
		//获取排行种类
		toTrade(item) {
			if (item.varietyType) {
				this.$store.commit('setGold', false)
				this.allVariety.forEach(value => {
					if (value.varietyType === item.varietyType) {
						this.$store.commit('setCurVariety', value)
						this.$nextTick(() => {
							this.$router.push({
								path: '/trade'
							})
						})
					}
				})
			}
		},

		showCube(type) {
			if (type.includes('国际')) {
				return 5
			} else if (type.includes('国内')) {
				return 5
			} else if (type.includes('外汇')) {
				return 2
			} else {
				return 2
			}
		},
		getTypeVariety() {
			this.$store.dispatch('getVariety').then(() => {
				clearTimeout(this.timer)
				if (this && this._isDestroyed) 
					return
				this.timer = setTimeout(() => {
					this.getTypeVariety()
					console.log(this.getTypeVariety())
				}, 2000)
			})
		},
		getAmrount() {
			var data = this.$store.dispatch('getAmrount') 
			 
		}
	}
}
</script>
<style scoped lang='scss'>
.bggray {
	background-color: #bdbdbd;
}

.hot {
	display: flex;
	flex-wrap: wrap;
}

.hot li {
	width: 33.33%;
}

.hot li div {
	width: 95%;
	margin: 0 auto;
	border-radius: rem(4px);
	overflow: hidden;
}

.hot li section {
	border-radius: rem(7px);
}

.hot li:nth-child(3) div {
	padding-right: 0;
}

.hot li:nth-child(6) div {
	padding-right: 0;
}

.hot section {
	position: relative;
}

.name {
	color: #3f3f3f;
}

.more {
	font-weight: normal;
}

.line {
	background-color: #3b3c4a;
	width: rem(3px);
	height: rem(12px);
	margin-top: rem(1px);
}

.bottom-line {
	height: rem(3px);
	width: 100%;
}

.more {
	color: #767676;
}

.trangle {
	margin-top: rem(2px);
	margin-left: rem(5px);
}

.trangle::after {
	content: '';
	float: right;
	width: 0;
	height: 0;
	border: rem(4px) solid transparent;
	border-left-color: #808080;
}
</style>